<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上课笔记</title>
</head>
<body>
    <!-- 
        操作dom元素
        对dom元素的增删改查
        1.查：获取dom元素
        2.增：创建一个dom元素，把这个dom元素添加到页面
           document.createElement('标签名')创建一个元素
           父元素.appendchild(创建的dom元素)把这个创建好的元素添加到最后的元素中
           document.createTextNode('文本的内容')创建文本节点
           document.querySelector('参数1','参数2') 把元素添加到前面《参数1添加到参数2的前面》
        3.删：
         document.querySelector('.p')
         把p标签移除
         父元素.removechild(子元素)
         把子元素从这个父元素中移除
         document.querySelector('元素')
         直接移除元素
         改：
     var ul= document.createElement('ul')
     用创建的ul元素替换
     克隆元素：
     cloneNode(布尔值)
     当参数为true的时候表示深克隆 把标签里面的所有元素都克隆
     当参数为false的时候表示浅克隆 只克隆该标签内容，不会克隆其子元素
     hasChildNodes()判断这个节点是否有子节点 有返回true 没有返回flase



    (四)
    获取非行内的样式
    getComputedstyle(dom元素).属性   只有在ie9以及以上才能获取 不会报错，会返回一个undifined
    var style=window.getComputedstyle(box).height
    var style=box.currentstyle.height 只能在ie8及其以下的才能获取样式



    (五)
    获取元素的尺寸
    1.元素.clienwidth  返回值是元素的宽度+左右padding值
    2.元素.clienheight 返回值是元素的height+上下的padding值
    3.元素.clienleft 返回值元素的左边框
    4.元素.clienTop 返回值元素的上边框
    没有办法获取下边框和右边框
    5.元素.offsetWidth 返回值：width+左右padding+左右border
     元素.offsetHeight 返回值：height+上下padding+上下border
     元素.offsetLeft 返回值：没有定位元素与浏览器最左侧的距离 当元素的父元素有定位，这个元素就是相对于父元素定位，
     offsetLeft得到的值就是元素到元素的左侧的距离
     元素.offsetTop 返回值：没有定位元素跟 浏览器最上面的距离
     当元素的父元素有定位。这个元素就是相对于父元素定位，offsetTop得到的值就是元素到元素上面的上面的距离





     (六)
     事件的组成：事件源（window） --btn元素  
    事件类型：onresize  --onclick
    事件处理函数：function(){}   fun函数





     （七）事件的绑定方法：
     window.onresize=function(){} 使用on 来给window绑定resize这个事件
     需要给同一个事件源绑定多次绑定同一个事件的时候
     使用on绑定方式只有最后一个会被执行
     监听事件的形式去绑定
     事件源.addEventListener('事件类型'，事件处理函数)
     可以给同一个事件源多次绑定同一个事件类型
     事件兼容：
     attachEvent('on+事件类型'，事件处理函数)
     给同一个事件源多次绑定同一个事件类型，执行顺序是从后往前执行
     在ie8及以下使用





     （八）
     事件对象：主要用来记录事件的信息  onmousedown
     兼容写法：window.even 在ie8及其以下的浏览器中获取事件对象
     短路运算：
     e=e||window.eventX 
     e.type事件类型
     e.button记录按钮按下的键
     值为0表示鼠标的左键
     值为1表示滚动点击
     值为2表示右键点击
     e.clientY光标在浏览器可视窗口的水平位置
     e.clientX光标在浏览器可视窗口的垂直位置
     e.offsetX光标在元素的水平位置
     e.offsetY光标在元素的垂直位置
     pageX 光标在页面中的水平位置
     pageY 光标在页面中的垂直位置
     （九）
     常用的事件：


        -->
    
</body>
</html>